<template>
  <div>
    <div class="page_header">
      <a-button type="primary" @click="toNew">新增任务</a-button>
      <div>
        <span>任务类型：</span>
        <a-select v-model="taskID" style="width: 220px"  @change="setTaskIDValue">
          <a-select-option v-for="(item,key) in taskIdList" :key="key" :value="item.id" @click="setTypeList(item)">{{item.task_name}}</a-select-option>
        </a-select>
        <span style="padding-left:18px">任务要求：</span>
        <a-select v-model="taskType" style="width: 220px" @change="setTaskTypeValue">
          <a-select-option :value="''">全部</a-select-option>
          <a-select-option v-for="(item,key) in taskTypeList" :key="key" :value="item">{{item}}</a-select-option>
        </a-select>
        <span style="padding-left:18px">任务ID：</span>
        <a-input
        placeholder="请输入任务ID"
        v-model="searchText"
        style="width:220px;"
        />
        <a-button type="primary" @click="onSearch" :loading="searchLoading">搜索</a-button>  
      </div>
    </div>
    <a-table :columns="columns" :dataSource="list" rowKey="id" :pagination="pagination" :loading="tableLoding" @change="handleTableChange" :customHeaderRow="clickHeaderRow">
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="id"  slot-scope="text,record">
       <a-icon v-if="record.task_top==1" type="fire" style="color:red" /> <span>{{record.id}}</span>
      </template> 
      <template slot="task_status"  slot-scope="text,record">
       <span :class="{ greenColor: record.task_status=='已结束', blueColor: record.task_status=='投放中'}">{{record.task_status}}</span>
      </template> 
      <template slot="task_url"  slot-scope="text,record">
        <ellipsis :length="14" tooltip>{{record.task_url}}</ellipsis>
      </template> 
      <template slot="task_note"  slot-scope="text,record">
        <ellipsis :length="14" tooltip>{{record.task_note}}</ellipsis>
      </template> 
      <template slot="action"  slot-scope="text,record"> 
        <!-- <a-button  type="primary" @click="taskTop(record)"> {{record.task_top==1?'取消':'置顶'}}</a-button> -->
        <a-dropdown placement="bottomCenter">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            操作 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <span @click="taskTop(record)"> {{record.task_top==1?'取消置顶':'任务置顶'}}</span>
            </a-menu-item>
            <a-menu-item>
              <span @click="taskStatus(record)"> {{record.task_status=='已结束'?'启用任务':'结束任务'}}</span>
            </a-menu-item>
            <a-menu-item>
              <span @click="delTask(record)">删除任务</span>
            </a-menu-item>
            <a-menu-item>
              <span @click="setCurrentTask(record)">修改任务数量</span>
            </a-menu-item>
            <a-menu-item>
              <span @click="setCurrentTaskIntegral(record)">修改任务积分</span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </a-table>
    <a-modal title="修改任务数量" v-model="modalUp"  :width="600" @ok="setTaskNumber">
      <div class="up_number">
        <a-radio-group v-model="task_number_type" button-style="solid">
          <a-radio-button value="1">
            增加
          </a-radio-button>
          <a-radio-button value="2">
            减少
          </a-radio-button>
        </a-radio-group>
        <a-input  v-model="task_number" class="up_number_in" placeholder="请输入数量" :maxLength="10" />
      </div>
      
    </a-modal>
    <a-modal title="修改任务积分" v-model="modalIntegral"  :width="600" @ok="setTaskIntegral">
      <div class="up_number">
        <span style="line-height: 32px;">设置积分:</span> <a-input  v-model="task_integral" class="up_number_in" placeholder="请输入积分" :maxLength="10" />
      </div>
      
    </a-modal>
  </div>
    
</template>

<script>
import { getTaskList, setTaskTop,taskLists,taskListEdit, delTaskList } from '@/api/getData'
import { Ellipsis } from '@/components'
export default {
  name: 'TaskList',
  components: {
   Ellipsis
  },
  data () {
    return {
        // 表头
        columns: [
            {
            title: '序号',
            dataIndex: 'sortId'
            },
            {
            title: '任务ID',
            dataIndex: 'id',
            scopedSlots: { customRender: 'id' },
            },
            {
            title: '任务名称',
            dataIndex: 'task_name'
            },
            {
            title: '任务链接',
            dataIndex: 'task_url',
            scopedSlots: { customRender: 'task_url' },
            width: 160
            },
            // {
            // title: '抖音ID',
            // dataIndex: 'task_dou_id'
            // },
            {
            title: '任务需求',
            dataIndex: 'task_note',
            scopedSlots: { customRender: 'task_note' },
            width: 160
            },
            {
            title: (c)=>{
              if(this.sort_task_num == "asc"){
                return "完成数量↑"
              }else{
                return "完成数量↓"
              }
            },
            dataIndex: 'task_num'
            },
            {
            title: '需求数量',
            dataIndex: 'task_progress'
            },
            {
            title: '奖励积分',
            dataIndex: 'task_integral'
            },
            {
            title: '发布人',
            dataIndex: 'task_release'
            },
            {
            title: (c)=>{
              if(this.sort_task_ok_time == "asc"){
                return "交付时间↑"
              }else{
                return "交付时间↓"
              }
            },
            dataIndex: 'task_ok_time'
            },
            {
            title: '任务类型',
            dataIndex: 'task_type'
            },
            {
            title: '任务状态',
            dataIndex: 'task_status',
            scopedSlots: { customRender: 'task_status' }
            },
            {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
            }
        ],
        list: [],
        pagination: {
            total: 0,
            current: 1,
            pageSize: 10
        },
        tableLoding: false,
        searchLoading: false,
        modalUp: false,
        modalIntegral: false,
        taskID: '',
        taskType: '',
        searchText: '',
        taskIdList: [],
        taskTypeList: [],
        task_number_old: '',
        task_number_type: '1',
        currentTask: {},
        task_integral_old: '',
        sort_task_num: 'asc',
        sort_task_ok_time: 'asc',
        sortKey: ''
    }
  },
  computed:{
    task_integral:{
      get:function(){
          return this.task_integral_old;
      },
      set:function(newValue){
          this.task_integral_old=newValue.replace(/[^\d]/g,'');
      }
    },
    task_number:{
      get:function(){
          return this.task_number_old;
      },
      set:function(newValue){
          this.task_number_old=newValue.replace(/[^\d]/g,'');
      }
    }
  },
  mounted () {
    this.initTaskList()
  },
  methods: {
    delTask(record){
      let that = this
      this.$confirm({
          title: `确认删除${record.task_name},任务id: ${record.id}?`,
          content: '',
          onOk() {
              delTaskList(record.id).then(res=>{
                if(res.code == 200){
                  that.$message.success(res.msg);
                  that.initTaskList()
                }else{
                  that.$message.info(res.msg);
                }
              })
          },
          onCancel() {}
      });
    },
    resetvalue(){
      this.taskID = ''
      this.taskType = ''
      this.taskTypeList = []
      this.searchText = ''
    },
    clickHeaderRow(record, index){
      let that = this;
      return {
        on: {
          click: (e) => {
            if(e.target.innerText == "完成数量↑" || e.target.innerText == "完成数量↓"){
              that.sortKey = 'task_num'
              if(that.sort_task_num == 'asc'){
                that.sort_task_num = 'desc'
              }else{
                that.sort_task_num = 'asc'
              }
              that.initTaskList()
            }else if(e.target.innerText == "交付时间↑" || e.target.innerText == "交付时间↓"){
              that.sortKey = 'task_ok_time'
              if(that.sort_task_ok_time == 'asc'){
                that.sort_task_ok_time = 'desc'
              }else{
                that.sort_task_ok_time = 'asc'
              }
              that.initTaskList()
            }
            // this.getDetailList(record.matbillid)
          }
        }
      }
    },
    setCurrentTask(item){
      this.currentTask = item
      this.modalUp = true
    },
    setCurrentTaskIntegral(item){
      this.task_integral_old = item.task_integral
      this.currentTask = item
      this.modalIntegral = true
    },
    setTaskIntegral(){
      console.log(this.task_integral)
      if(this.task_integral == ''){
        return
      }
      this.modalIntegral = false
      taskListEdit(this.currentTask.id,'','',this.task_integral).then(res=>{
        console.log(res)
        this.initTaskList()
      })
    },
    setTaskNumber(){
      if(this.task_number == '' || Number(this.task_number) == 0){
        return
      }
      console.log(this.task_number)
      let task_number = this.task_number;
      if(this.task_number_type=='2'){
        task_number = '-'+task_number
      }
      this.modalUp = false
      taskListEdit(this.currentTask.id,task_number,'','').then(res=>{
        console.log(res)
        this.initTaskList()
      })
    },
    taskStatus(item){
      let status = 2
      if(item.task_status=='已结束'){
        status = 1
      }
      taskListEdit(item.id,'',status,'').then(res=>{
        console.log(res)
        this.initTaskList()
      })
    },
    async initTaskList(){
        this.tableLoding = true
        await taskLists(1).then(res=>{
          // console.log(res)
          let list  = res.data.list;
          list.unshift({
            'task_name': '全部',
            'id': ''
          })
          this.taskIdList = list
        })
        let sort = ''
        if(this.sortKey == 'task_num'){
          sort = this.sort_task_num
        }else if(this.sortKey == 'task_ok_time'){
          sort = this.sort_task_ok_time
        }
        getTaskList(this.taskID,this.taskType,this.pagination.current,this.pagination.pageSize,this.searchText,this.sortKey,sort).then(res=>{
            console.log(res)
            this.sortKey = ''
            this.list = res.data.list
            this.pagination.total = res.data.total
        }).finally(e=>{
            this.tableLoding = false
            this.searchLoading = false
            this.resetvalue()
        })
    },
    handleTableChange(pagination) {
      console.log(pagination)
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.initTaskList()
    },
    onSearch(){
      this.searchLoading = true
      this.initTaskList()
    },
    toNew(){
        this.$router.push({path: '/taskadmin/newTask'})
    },
    setTaskIDValue(value){
      console.log(this.taskID)
      // this.taskID = value
    },
    setTaskTypeValue(value){
      console.log(this.taskType)
      // this.taskType = value
    },
    setTypeList(item){
      // this.taskTypeList = typeList[item.template]
      this.taskTypeList = item.task_type
      this.taskType = ''
    },
    taskTop(record){
      let top = 0;
      if(record.task_top==0){
        top = 1
      }
      setTaskTop(record.id,top).then(res=>{
        console.log(res)
        this.initTaskList()
      })
    }
  }
}
</script>

<style scoped>
.user_avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.user_btn{
  background:#fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.page_header{
    margin-bottom:20px; 
    display:flex;
    justify-content: space-between;
}
.up_number{
  display: flex;
  margin: 15px 0;
}
.up_number_in{
  flex: 1;
  margin-left: 30px;
}
</style>
